<template>
  <basic-container>
    <avue-crud v-bind="bindVal"
               v-on="onEvent"
               :page.sync="page"
               v-permission="{delBtn: 'SMS_DEL',addBtn: 'SMS_ADD',editBtn: 'SMS_UPDATE'}"
               v-model="form">

      <template slot="menuLeft" slot-scope="scope">
        <el-button type="danger" v-permission="'SMS_DEL'" icon="el-icon-delete" size="small" @click.stop="deletes()">批量删除</el-button>
      </template>

      <template slot="category" slot-scope="scope">
        <el-tag>{{scope.row.params.category}}</el-tag>
      </template>

      <template slot="code" slot-scope="scope">
        <b @click="copyCode(scope.row.code)" :style="{color: colorName,cursor: 'pointer'}">{{scope.row.code}}</b>
      </template>

      <template slot-scope="{type,size,row,index}" slot="menu">
        <el-button icon="el-icon-check" :size="size" :type="type" @click="testSms(row)">调试</el-button>
      </template>

      <template slot="header">
        <el-tag size="small">更新密钥后<span style="color: red;font-weight: bolder">最晚5分钟</span>生效</el-tag>
      </template>

    </avue-crud>

    <el-dialog custom-class="avue-dialog" class="avue-dialog"
               v-dialogDrag
               :close-on-click-modal="false"
               :title="`短信调试 [${sms.code}]`"
               width="380px"
               append-to-body
               :visible.sync="testSmsBox">

      <avue-form ref="testForm" :option="testOption" v-model="sendParams"></avue-form>

      <span slot="footer"
            class="avue-dialog__footer">
        <el-button @click="testSmsBox = false">取 消</el-button>
        <el-button type="primary" @click="sendSms">发 送</el-button>
      </span>
    </el-dialog>

  </basic-container>
</template>

<script>


import {mapGetters} from "vuex";
import func from "@/util/func";

export default window.$crudCommon({
  data () {
    return {
      sms: {},
      testSmsBox: false,
      phone: '',
      testOption: {
        submitBtn:false,
        emptyBtn:false,
        menuSpan:1,
        column: []
      },
      sendParams:{}
    }
  },
  created () {
  },
  computed: {
    ...mapGetters(["colorName"])
  },
  methods: {
    copyCode(code) {
      this.$Clipboard({
        text: code
      }).then(() => {
        this.$message.success('复制成功')
      }).catch(() => {
        this.$message.error('复制失败')
      });
    },
    sendSms(){
      this.$refs.testForm.validate((valid, done, msg) => {
        if (valid) {
          done();
          delete this.sendParams['divider-el'];
          this.sendParams.codeName = this.sms.code;
          this.api['test'](this.sendParams).then(res=>{
            if (res.data.status){
              this.$message.success('发送成功')
              this.testSmsBox = false;
            } else {
              this.$message.error(res.data.message)
            }
          }).catch(() => {
            this.$message.error('发送失败')
          });
        } else {
          console.log(msg);
          return false;
        }
      })
    },
    testSms(row){
      this.sms = row;

      this.testOption.column = [{
        label:'手机号',
        prop:'phone',
        type:'input',
        span: 23,
        maxlength: 11,
        showWordLimit: true,
        rules: [{
          required: true,
          message: "请输入 手机号",
          trigger: "blur"
        },
          {
            pattern: /(?:0|86|\+86)?1[3-9]\d{9}/,
            message: "手机号不合法"
          }]
      },
        {
          label: '',
          labelWidth: 0,
          prop: 'divider-el',
          component: 'elDivider',//ele分割线
          span:24,
          params: {
            html: '<span style="color: #c0c4cc;font-size: 13px;">短信模板参数</>',
            contentPosition: "left",
          }
        }];
      for (let key of func.split(row.parameters)) {
        this.testOption.column.push({
          label: key,
          prop: key,
          type: 'input',
          span: 23
        });
      }
      this.sendParams = {};
      this.testSmsBox = true;
    }

  }
}, {
  name: '/resource/sms',
  data: 'list'
})
</script>

<style lang="scss" scoped>
</style>